<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>公益活动列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src='<c:url value="/js/boot.js"></c:url>'></script>
<link rel="stylesheet" type="text/css"
	href='<c:url value="/share/styles.css"></c:url>' />
<style type="text/css">
body, html {
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: "微软雅黑";
}

#allmap {
	width: 100%;
	height: 100%;
}

p {
	margin-left: 5px;
	font-size: 14px;
}

body {
	height: 100%;
	overflow: hidden;
}

.filterPan td {
	padding: 0;
}

.level1Class {
	margin-left: 10px;
}

.level2Class {
	margin-left: 30px;
}

.level3Class {
	margin-left: 50px;
}

.deepDark {
	background-color: #FFF7BB;
}

.lowDark {
	
}

.normalDark {
	
}

.mini-splitter-pane {
	overflow: auto;
}

.mini-panel-body {
	padding: 0;
}

html body .searchbox .mini-buttonedit-icon {
	background: url('<c:url value="/share/img/magnifier-zoom.png"></c:url>')
		no-repeat 5% 5%;
}

.nameTitle {
	color: red;
}
</style>
<script type="text/javascript">
	var radioValue = [ {
		id : 0,
		text : "用户"
	}, {
		id : 1,
		text : "律师"
	} ];
</script>

</head>
<body>
	<div class="mini-toolbar"
		style="padding: 0px; border-width: 1px; border-bottom-width: 0px;">
		<table style="width: 100%;">
			<tr>
				<td style="width: 5px; height: 23px;"></td>
				<td width="300px"><a class="mini-button" id="rebackBtn"
					plain="true" iconCls="icon-list" onclick="status1">返回列表</a>
					<div id="typeBtn" class="mini-radiobuttonlist" repeatItems="1"
						repeatLayout="table" repeatDirection="vertical"
						style="float: left;margin-top:4px;" textField="text" valueField="id" value="0"
						onvaluechanged="loadGrid1" data=radioValue></div> <a
					class="mini-button" id="resetBtn" iconCls="icon-reset" plain="true"
					onclick="reloadList">刷新</a>&nbsp;&nbsp;用户：<span class="nameTitle">未选择</span></td>
				<td><span id="separatorId" class="separator">&nbsp;&nbsp;查询日期:&nbsp;&nbsp;<input
						id="starting" class="mini-datepicker" style="width: 100px;"
						showNullItem="false" valueField="" onvalidation=""
						allowInput="false" emptyText="起始期间..." nullItemText="&lt;无&gt;" />
						<span
						style="vertical-align: middle; margin: auto 5px; display: inline-block;">至</span>
						<input id="ending" class="mini-datepicker" style="width: 100px;"
						showNullItem="false" valueField="" onvalidation=""
						allowInput="false" emptyText="截止期间..." nullItemText="&lt;无&gt;" />
						<a class="mini-button" id="seachOrgBtn" iconCls="icon-mag"
						onclick="onselect_2" tooltip="统计" plain="true">统计</a></span><a
					width="100px"></a> &nbsp;&nbsp;&nbsp;&nbsp;<a class="mini-button"
					id="check" iconCls="icon-img" plain="true" onclick="checkMap">查看地图</a><a
					class="mini-button" id="exportBtn" iconCls="icon-excel"
					plain="true" onclick="exportExcel">导出Excel</a></td>
				<td style="width: 80px; height: 100%;">
					<div class="pageStatContainer">
						<div id="pageStatBtn_list"
							class="pageStat pageStatList pageStatListPress">
							<p>1</p>
						</div>
						<div id="pageStatBtn_form" class="pageStat pageStatForm">
							<p>2</p>
						</div>
						<div id="pageStatBtn_split" class="pageStat pageStatSplit">
							<p>3</p>
						</div>
					</div>
				</td>
			</tr>
		</table>
	</div>
	<div class="mini-fit">
		<div id="splitterPan" class="mini-splitter"
			style="width: 100%; height: 100%;" handlerSize="0">
			<div id='panLeft' size="400" showCollapseButton="true"
				style="padding: 0px;">
				<div class="mini-fit">
					<div class="mini-splitter" style="width: 100%; height: 100%;">
						<div size="320px" showCollapseButton="true">
							<div id="datagrid1" class="mini-datagrid gridFull"
								borderStyle="border:1;" showReloadButton="true" pagesize="100"
								sizeList="[20,50,100,200]" allowCellWrap="true"
								allowHeaderWrap="true" idField="No" multiSelect="true"
								showPager="true" allowAlternating="true"
								ondrawcell="ondatagrid1DrawCell" onrowclick="gridRowDbClick"
								style="height: 100%; width: 100%; -moz-user-select: none; -webkit-user-select: none;"
								collapseGroupOnLoad="false" showColumnsMenu="true"
								showFilterRow="true" onshowrowdetail="onShowRowDetail">
								<div property="columns">
									<div type="indexcolumn" width="20px"></div>
									<div field="Action" width="70px" headerAlign="center"
										align="center">
										<a class="mini-button" property="filter" id="removeBtn"
											align="center" iconCls="icon-broom" tooltip="清除筛选"
											onclick="removeSearch">清除 </a>
									</div>
									<div field="USERNAME" width="120px" headerAlign="center"
										align="left" allowSort="true">
										用户名<input id="filter0" property="filter"
											class="mini-buttonedit searchbox" style="width: 100%;"
											onbuttonclick="onselect_1" emptyText="筛选..."
											onenter="onselect_1" />
									</div>
									<div field="PHONENO" width="100px" headerAlign="center"
										align="left" allowSort="true">
										电话<input id="filter1" property="filter"
											class="mini-buttonedit searchbox" style="width: 100%;"
											onbuttonclick="onselect_1" emptyText="筛选..."
											onenter="onselect_1" />
									</div>
									<div name="emptyCol" width='100%' headerAlign="center"
										align="center" cellStyle="padding:0;"></div>
								</div>
							</div>
						</div>
						<div showCollapseButton="true">
							<div id="datagrid2" class="mini-datagrid gridFull"
								borderStyle="border:1;" showReloadButton="true" pagesize="100"
								sizeList="[20,50,100,200]" allowCellWrap="true"
								allowHeaderWrap="true" idField="No" multiSelect="true"
								showPager="true" allowAlternating="true"
								ondrawcell="ondatagrid1DrawCell_2"
								onrowdblclick="gridRowDbClick_2"
								style="height: 100%; width: 100%; -moz-user-select: none; -webkit-user-select: none;"
								collapseGroupOnLoad="false" showColumnsMenu="true"
								showFilterRow="true" onshowrowdetail="onShowRowDetail">
								<div property="columns">
									<div type="indexcolumn" width="40px"></div>
									<div field="Action" width="70px" headerAlign="center"
										align="center">
										<a class="mini-button" property="filter" id="removeBtn"
											iconCls="icon-broom" tooltip="清除筛选" onclick="removeSearch_2">清除
										</a>
									</div>
									<div field="ACTIVITYNAME" width="200px" headerAlign="center"
										align="left" allowSort="true">
										活动名称<input id="filter2" property="filter"
											class="mini-buttonedit searchbox" style="width: 100%;"
											onbuttonclick="onselect_2" emptyText="筛选..."
											onenter="onselect_2" />
									</div>
									<div field="PLAYERS" width="65px" headerAlign="center"
										align="center" allowSort="true">参与人数</div>
									<div field="LOCATIONADDR" width="260px" headerAlign="center"
										align="left" allowSort="true">活动地点</div>
									<div field="CREATETIME" width="120px" headerAlign="center"
										align="left" allowSort="true">签到时间</div>
									<div field="NOTE" width="400px" headerAlign="center"
										align="left" allowSort="true">备注</div>
									<div name="emptyCol" width='100%' headerAlign="center"
										align="center" cellStyle="padding:0;"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="panRight" showCollapseButton="true" expanded="false"
				style="overflow: hidden;">
				<iframe id="allmap" class="subPageFrame" frameborder="0"> </iframe>
			</div>
		</div>
	</div>
	<div id="htmlContent" style="padding-left: 10px; display: none;">
		导出文件名： <input id="fileNameId" class="mini-textbox" enabled="false"
			emptyText="请输入导出文件名" style="width: 86%; margin-top: 5px;"></input> <span
			style="color: red;">&nbsp;.xls</span>
	</div>


	<script type="text/javascript">
		mini.parse();

		mini_debugger = false;
		var isKeepStat3 = false;

		var rootPath = '${rootPath}';
		var type = 1;

		var filterHelper = gridFilter();
		var filterHelper2 = gridFilter();

		var typeBtn = mini.get("typeBtn");
		var datagrid1 = mini.get("datagrid1");
		var datagrid2 = mini.get("datagrid2");
		var splitpan = mini.get("splitterPan");
		var filter0 = mini.get("filter0");
		var filter1 = mini.get("filter1");
		var filter2 = mini.get("filter2");
		var filter3 = mini.get("filter3");
		var mapList = new Array();
		var phoneNo = null;

		var starting = mini.get("starting");
		var ending = mini.get("ending");

		$(function() {
			$(".pageStat").hover(function() {
				$(this).addClass("hoverStyle");
			}, function() {
				$(this).removeClass("hoverStyle");
			});
			$(".pageStat").click(
					function() {
						$this = $(this);
						var value = $this.find("p").first().html();
						if (value == 1) {
							splitpan.collapsePane(2);
							$this.addClass("pageStatListPress");
							$this.next().removeClass("pageStatFormPress")
									.next().removeClass("pageStatSplitPress");
							isKeepStat3 = false;
							status1Show();
						}
						if (value == 2) {
							splitpan.collapsePane(1);
							$this.addClass("pageStatFormPress");
							$this.prev().removeClass("pageStatListPress");
							$this.next().removeClass("pageStatSplitPress");
							isKeepStat3 = false;
							status2Show();
						}
						if (value == 3) {
							splitpan.expandPane(1);
							splitpan.expandPane(2);
							$this.addClass("pageStatSplitPress");
							$this.prev().removeClass("pageStatFormPress")
									.prev().removeClass("pageStatListPress");
							isKeepStat3 = true;
							status3Show();
						}
					});
			status1();
			loadGrid1();
		});
		//双击
		function gridRowDbClick(e) {
			phoneNo = e.row.PHONENO;
			var name = e.row.USERNAME;
			$('.nameTitle').html(name);
			loadGrid2(phoneNo);
			//showDetail(id);
		}
		function checkMap() {
			status2();
			$("#check").hide();
			$('#allmap').css('height', '100%').css('width', '100%').attr('src',
					'<c:url value="/public/map" />');
		}
		function onselect_1() {
			var filterValue0 = filter0.getValue();
			var filterValue1 = filter1.getValue();
			/* var filterValue2 = filter2.getValue();
			var filterValue3 = filter3.getValue(); */
			filterHelper.clearFilterData();
			if (filterValue0 != "") {
				var filterdata = filterHelper.formFilterData("USERNAME",
						filterValue0, '', 'CONTAIN', 'AND');
				filterHelper.addFilterData(filterdata);
			}
			if (filterValue1 != "") {
				var filterdata = filterHelper.formFilterData("PHONENO",
						filterValue1, '', 'CONTAIN', 'AND');
				filterHelper.addFilterData(filterdata);
			}
			loadGrid1();
		}
		function onselect_2() {
			var filterValue2 = filter2.getValue();
			var filterValue3 = starting.getValue();
			var filterValue4 = ending.getValue();
			filterHelper2.clearFilterData();
			if (filterValue3 && filterValue4 && filterValue3 > filterValue4) {
				mini.alert('结束日期不能小于开始日期！');
				return;
			}
			if (filterValue2 != "") {
				var filterdata = filterHelper.formFilterData("ACTIVITYNAME",
						filterValue2, '', 'CONTAIN', 'AND');
				filterHelper2.addFilterData(filterdata);
			}
			if (filterValue3 != "") {
				var startTime = new Date(filterValue3);
				var tempTime = startTime.valueOf();
				startTime += 24 * 60 * 60 * 1000;
				startTime = new Date(tempTime);
				var year = startTime.getYear() + 1900;
				var month = startTime.getMonth() + 1;
				if (month < 10) {
					month = "0" + month;
				}
				var day = startTime.getDate();
				if (day < 10) {
					day = "0" + day;
				}
				filterValue3 = year + "-" + month + "-" + day;
				var filterdata = filterHelper.formFilterData("CREATEDATE",
						filterValue3, '', 'GREATER_EQUALS', 'AND');
				filterHelper2.addFilterData(filterdata);
			}
			if (filterValue4 != "") {
				var filterdata = filterHelper.formFilterData("CREATEDATE",
						filterValue4, '', 'LESS_EQUALS', 'AND');
				filterHelper2.addFilterData(filterdata);
			}
			loadGrid2(phoneNo);

		}
		function loadGrid1() {
			var filterData = filterHelper.getFilterData();
			var postData = new Object();
			if (filterData != null || filterData.length > 0) {
				postData.filterdata = mini.encode(filterData);
			}
			var userType = typeBtn.getValue();
			var url = "<c:url value='/public/listData/normal' />";
			if(userType == 1){
				url = "<c:url value='/public/listData/lawyer' />";
			}
			datagrid1.load(url);

			datagrid1.load(postData, function() {
				var row = datagrid1.getRow(0);
				datagrid1.setSelected(row);
				phoneNo = row.PHONENO;
				var name = row.USERNAME;
				$('.nameTitle').html(name);
				if (row) {
					loadGrid2(phoneNo);
				}
			});
		}
		function loadGrid2(No) {
			var filterData = filterHelper2.getFilterData();
			var postData = new Object();
			if (filterData != null || filterData.length > 0) {
				postData.filterdata = mini.encode(filterData);
			}
			var userType = typeBtn.getValue();
			var url = "<c:url value='/public/signUp_listData/normal/' />" + No;
			if(userType == 1){
				url = "<c:url value='/public/signUp_listData/lawyer/' />" + No;
			}
			datagrid2.load(url);
			mapList = new Array();
			datagrid2.load(postData, function() {
				var gridData = datagrid2.data;
				for (var i = 0, length = gridData.length; i < length; i++) {
					var map = new Object();
					var time = FormatDate(gridData[i].CREATETIME);
					gridData[i].CREATETIME = time;
					/* map.CREATETIME = gridData[i].CREATETIME; */
					if (gridData[i].LOCATIONDETAI) {

						map.Address = "活动名称：" + gridData[i].ACTIVITYNAME
								+ "<br>" +"地点: " + gridData[i].LOCATIONADDR
								+ gridData[i].LOCATIONDETAIL +  "<br>" +"时间: " + time;
					} else {
						map.Address = "活动名称：" + gridData[i].ACTIVITYNAME
								+ "<br>" +"地点: " + gridData[i].LOCATIONADDR
								+ "<br>"+"时间: " + time;
					}
					map.LATITUDE = gridData[i].LATITUDE;
					map.LONGITUDE = gridData[i].LONGITUDE;
					mapList.push(map);
				}
			});
		}
		function removeSearch() {
			filter0.setValue();
			filter0.setText();
			filter1.setValue();
			filter1.setText();
			filterHelper.clearFilterData();
			loadGrid1();

		}
		function removeSearch_2() {
			filter2.setValue();
			filter2.setText();
			starting.setValue();
			starting.setText();
			ending.setValue();
			ending.setText();
			filterHelper2.clearFilterData();
			loadGrid2(phoneNo);

		}
		function ondatagrid1DrawCell(e) {
			var row = e.row;
			var field = e.field;

			if (field == "Action") {
				var id = row.ID;
				e.cellHtml = '<a class="aTagUnderLine" href="javascript:showDetail(\''
						+ id + '\')">[查看]</a>';
			}

		}
		function ondatagrid1DrawCell_2(e) {
			var row = e.row;
			var field = e.field;
			var map = new Object();
			if (field == "Action") {
				var id = row.ID;
				e.cellHtml = '<a class="aTagUnderLine" href="javascript:showMap()">[查看]</a>';
			}

			if (field == "CREATETIME") {
				var CREATETIME = row.CREATETIME;
				var time = FormatDate(CREATETIME);
				e.cellHtml = time;
			}
		}

		function status1() {
			if (!isKeepStat3) {
				$("#pageStatBtn_list").click();
			}
		}
		function status2() {
			if (!isKeepStat3) {
				$("#pageStatBtn_form").click();
			}
		}
		function status3() {
			$("#pageStatBtn_split").click();
		}
		function status1Show() {
			$('#rebackBtn').hide();
			$('#typeBtn').show();
			$('#resetBtn').show();
			$("#check").show();
			$("#exportBtn").show();
			$("#separatorId").show();
		}
		function status2Show() {
			$('#rebackBtn').show();
			$('#typeBtn').hide();
			$('#resetBtn').hide();
			$("#check").hide();
			$("#exportBtn").hide();
			$('#separatorId').hide();
		}
		function status3Show() {
			$('#rebackBtn').hide();
			$('#typeBtn').show();
			$('#resetBtn').show();
			$("#check").hide();
			$("#exportBtn").hide();
		}
		function reloadList() {
			datagrid1.reload();
		}

		function FormatDate(strTime) {
			var date = new Date(strTime);
			return date.getFullYear() + "-" + (date.getMonth() + 1) + "-"
					+ date.getDate() + " " + date.getHours() + ":"
					+ date.getMinutes();
		}

		function showMap() {
			var row = datagrid2.getSelected();
			var map = new Object();
			mapList = new Array();
			var time = FormatDate(row.CREATETIME);
			row.CREATETIME = time;
			/* map.CREATETIME = gridData[i].CREATETIME; */
			if (row.LOCATIONDETAI) {

				map.Address = "活动名称：" + row.ACTIVITYNAME + "   地点:"
						+ row.LOCATIONADDR + row.LOCATIONDETAIL + "   时间:"
						+ time;
			} else {
				map.Address = "活动名称：" + row.ACTIVITYNAME + "   地点:"
						+ row.LOCATIONADDR + "   时间:" + time;
			}
			map.LATITUDE = row.LATITUDE;
			map.LONGITUDE = row.LONGITUDE;
			mapList.push(map);
			status2();
			$('#allmap').css('height', '100%').css('width', '100%').attr('src',
					'<c:url value="/public/map" />');
		}
		function exportExcel() {

			var htmlContent = document.getElementById("htmlContent");
			var fileNameId = mini.get("fileNameId");
			var row = datagrid1.getSelected();
			var reportName = '公益活动列表-' + row.USERNAME;
			fileNameId.setValue(reportName);
			//fileNameId.text = reportName;
			fileNameId.focus();
			var clone = htmlContent.cloneNode(true);
			clone.style.display = "";

			mini.showMessageBox({
				width : 250,
				title : "公益活动导出",
				buttons : [ "ok", "cancel" ],
				message : "自定义Html",
				html : clone,
				showModal : false,
				callback : function(action) {
					if (action == "ok") {
						var fileName = fileNameId.value;
						if (!fileName) {
							fileName = reportName;
						}
						fileName = encodeURI(fileName); //编码
						var url = rootPath + '/export/public/' + row.PHONENO
								+ '/normal/' + fileName;
						window.open(url);
					}
				}
			});
		}
	</script>
</body>
</html>